<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东省挂牌房源折线图</title>
    <style>
        #chart4 {
            width: 1000px;
            height: 700px;
            margin: 0 auto; /* 水平居中 */
            display: flex; /* 使用 Flexbox */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            border: 1px solid #ccc; /* 可选，为容器添加边框 */
        }
    </style>
</head>
<body>

    <div id="chart4"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
    <script>
        var chartDom = document.getElementById('chart4');
        var myChart = echarts.init(chartDom, 'dark');
        var option;

        option = {
            title: {
                text: '山东省挂牌时间房源数量'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [0, 103, 311, 2110, 9874, 15530, 34621, 47698, 65452],
                    type: 'line',
                    lineStyle: {
                        color: '#48d1cc', // 线条的颜色
                        width: 5, // 线条的宽度
                    },
                    areaStyle: {},
                    itemStyle: {
                        normal: {
                            color: '#ADD8E6', // 正常状态下的点颜色
                            symbol: 'circle', // 数据点的形状
                            symbolSize: 8 // 数据点的大小
                        },
                        emphasis: {
                            color: '#00ffff' // 鼠标悬停时的颜色
                        }
                    }
                }
            ]
        };

        // 为每个数据点添加标记点
        option.series[0].markPoint = {
            symbol: 'circle', // 标记点的形状
            symbolSize: 20, // 标记点的大小
            itemStyle: {
                color: '#66CDAA' // 标记点的颜色
            },
            data: option.xAxis.data.map(function (item, index) {
                return {
                    coord: [index, option.series[0].data[index]], // 标记点的坐标（年份索引, 值）
                    name: item // 标记点的名称
                };
            })
        };

        myChart.setOption(option);
    </script>

</body>
</html>